<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
h1, h2 {
background-color: #DDEEFF;
border: 0 none;
color: inherit;
font-family: verdana,arial,helvetica,Sans-Serif;
margin: 0 0 0.5em;
padding: 0.3em;
}
h3 {
background-color: #FFFFFF;
border-color: #DDEEFF;
border-style: solid;
border-width: 1px 5px 3px 10px;
color: inherit;
font-family: verdana,arial,helvetica,Sans-Serif;
margin: 0 0 0.5em;
padding: 0.3em;
}
h4 {
background-color: #FFFFFF;
border-left: 18px solid #DDEEFF;
color: inherit;
font-family: verdana,arial,helvetica,Sans-Serif;
margin: 0 0 0.5em;
padding: 0.3em;
}
pre, dl, ol, p, blockquote {
line-height: 130%;
}
body, td {
color: black;
font-family: verdana,arial,helvetica,Sans-Serif;
font-size: 90%;
}
element.style {
margin-left: 16px;
padding-left: 16px;
}
ul.list1 {
list-style-type: disc;
}
ul {
line-height: 130%;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
.style_table {
background-color: #CCD5DD;
border: 0 none;
color: inherit;
padding: 0;
text-align: left;
}
.style_td {
background-color: #EEF5FF;
color: inherit;
margin: 1px;
padding: 5px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>画面設計</h2>
<h3 id="content_1_1">画面遷移</h3>
<img alt="画面遷移図" src="design_screen_transition.gif">
<!--
	C:\webapp4\jsc\trunk\docs\design_screen_transition.dia
-->
<br />
<br />
<br />

<h3 id="content_1_1">１．カレンダー</h3>
<br />
<h4 id="content_1_2">業務機能</h4>
<ul>
<li>学年毎の指定月におけるスケジュールの確認</li>
<li>管理者ログインの入り口</li>
</ul>

<br />

<h4 id="content_1_2">画面レイアウト</h4>
<img alt="カレンダー画面レイアウト" src="calendar.png">
<!--
C:\webapp4\jsc\trunk\docs\calendar.xls
-->
<br />
<br />
<h4 id="content_1_2">画面機能</h4>
<p>
<strong>①「先月」「翌月」アンカー<br /></strong>
カレンダーに表示する月を選択する。
</p>
<p>
<strong>②学年チェックボックス<br /></strong>
カレンダーに表示する学年を選択する。
</p>
<p>
<strong>③「定期練習」「練習試合」「レクレーション」アンカー<br /></strong>
予定参照画面に遷移する。
</p>
<p>
	<strong>④結果アンカー</strong><br />
	試合結果参照画面に遷移する。<br />
	試合当日の間は「試合速報」と表示する。
	<span style="color: RED">※V3より実装</span>
</p>
<br />
<h3>２．予定閲覧</h3>
<br />
<h4>業務機能</h4>
<p>
集合場所と、連絡事項を確認する。
</p>
<h4>画面レイアウト</h4>
<img alt="予定閲覧画面レイアウト" src="Planned_reading.png">
<br />
<h4>画面機能</h4>
<p>
<strong>①集合場所名称</strong><br />
集合場所を示すYahoo地図を別ウィンドーで開く。
</p>
<p>
<strong>②戻るボタン</strong><br />
カレンダー画面に遷移する。<br />
カレンダー画面は、当該予定閲覧画面に遷移する直前の状態を復元する。
</p>
<br />
<h3>３．ログイン</h3>
<br />
<h4>業務機能</h4>
管理機能（予定登録、地図登録）を利用するためにログインする。<br />
<br />
<h4>画面レイアウト</h4>
<img alt="ログイン画面レイアウト" src="login.gif">

<!--
<h2>CENTOS環境の種類</h2>
<h3 id="content_1_1">開発環境</h3>
<h4 id="content_1_2">構成概要</h4>
<P>以下のマシン構成となります。</P>
<ul>
    <li>フロントWebサーバ（事業主毎に用意する、事業主毎に１台構成）</li>
    <li>バックヤードWebサーバ（開発環境内で共有、ドメインは独立）</li>
</ul>

<table class="style_table" cellspacing="1" border="0">
<tbody>
<tr>
<td class="style_td">開発環境</td>
<td class="style_td">開発環境</td>
</tr>
</tbody>
</table>
 -->
</html>